<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>首页</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="../bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
  <style type="text/css">
  	html,body{
  		height: 100%;
  		background-color: #ccc;
  	}
  	.container{
  		border: 0px solid #0f0;
  		height: 100%;
  		padding: 0px; 
  		width: 571px;
  		display: flex;
  		flex-direction: column;
  	}
  	.header{
			border: 0px solid #f00;
			height: 113px;
			width: 100%;
			background: #EAECEB;
  	}
  	.header-title{
  		height: 41%;
  		background: #DEE1E6;
  	}
  	.header-search{
  		height: 59%;
  		border: 1px solid #d00;
  	}
  	.footer{
  		background: #656565;
  		height: 64px;
  		flex: 0 0 auto;
  	}
  	article{
  		height: 100%;
  		background-color: #fff;
  	}
  	a:link{
  		text-decoration: none;
  	}
  	.bar{
  		width: 571px;
  		margin: auto;
  	}
  </style>
</head>
<body>
	<div class="container">
		<!-- 头部，搜索，分类显示 -->
		<header class="header sticky-top">
			<!-- 分类 -->
			<div class="header-title">
				<div class="bar bar-nav">
			    <div class="buttons-row">
				    <a href="#" class="tab-link button active">寻找失物</a>
				    <a href="#" class="tab-link button">寻找失主</a>
				  </div>
				</div>	
			</div>
		  <!-- 搜索栏 -->
			<div class="header-search">
				<div class="bar bar-header-secondary">
				  <div class="searchbar">
				    <a class="searchbar-cancel">取消</a>
				    <div class="search-input">
				      <label class="icon icon-search" for="search"></label>
				      <input type="search" id='search' placeholder='输入关键字...'/>
				    </div>
				  </div>
				</div>
			</div>
		</header>
		<!-- 中间，记录显示 -->
		<article class="article">

		</article>
		<!-- 底部，导航栏 -->
		<footer class="footer">
		  <nav class="bar bar-tab">
		    <a class="tab-item active" href="#">
		      <span class="icon icon-home"></span>
		      <span class="tab-label">首页</span>
		    </a>
		    <a class="tab-item" href="#">
		      <span class="icon icon-edit"></span>
		      <span class="tab-label">发贴</span>
		    </a>
		    <a class="tab-item" href="#">
		      <span class="icon icon-message"></span>
		      <span class="tab-label">信息</span>
		    </a>
		    <a class="tab-item" href="#">
		      <span class="icon icon-me"></span>
		      <span class="tab-label">我</span>
		    </a>
		  </nav>
		</footer>
	</div> <!-- end of container -->

  <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
</body>
</html>